<!--
 * @Author: Penk
 * @LastEditors: Penk
 * @LastEditTime: 2022-11-11 16:25:32
 * @FilePath: \web面试题\css优先级.html
 * @email: 492934056@qq.com
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .important_class {
        color: black !important;
      }
      #id {
        color: blue;
      }
      .class {
        color: yellowgreen;
      }
      .class:hover {
        color: yellow;
      }
      div[color="green"] {
        color: green;
      }
      div {
        color: brown;
      }
      div::first-line {
        /* color: blueviolet; */
      }
    </style>
  </head>
  <body>
    <h3>
      ！important > 内嵌 1000 >Id 100 > class=[]=伪类 10 > tag=伪元素 1 > ( * +
      > ~) 0
    </h3>

    <div class="important_class" style="color: red">
      !important black > 内联red
    </div>
    <div style="color: red" id="id">内联red > id选择器blue</div>
    <div id="id" color="green">id选择器blue > 属性选择器green</div>
    <div color="green" class="class">
      伪类选择器 > 属性选择器green > 类选择器yellow
    </div>
    <div class="class">伪类选择器 > 属性选择器green > 标签选择器brown</div>
    <div>111</div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </body>
</html>
